<div class="content__title">
  <h1>
      <span>水质类别颜色管理</span> <small></small>
  </h1>

  <div class="mb-md text-right">
      <button nz-button 
      [nzType]="'primary'" 
      [nzSize]="'large'" 
      (click)="create('')"
      *ngIf="isGranted('Pages.WaterQualityColors.Create')"
      >
          <i class="anticon anticon-plus"></i>
          <span>创建</span>
      </button>

  </div>

</div>
<div nz-row [nzGutter]="16">
  <div nz-col [nzMd]="24">
      <nz-card>
         
          <nz-table #nzTable
              [nzAjaxData]="list"
              [nzLoading]="loading"
              >
              <thead nz-thead>
                  <tr>
                      <th nz-th><span>{{l('Actions')}}</span></th>
                      <th nz-th><span>类别名称</span></th>
                      <th nz-th><span>类别范围</span></th>
                      <th nz-th><span>自定义</span></th>
                  </tr>
              </thead>
              <tbody nz-tbody>
                  <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                      
                          <td nz-td>

                                  <nz-dropdown>
                                          <a class="ant-dropdown-link" nz-dropdown>
                                                  {{l("Actions")}} <i class="anticon anticon-down"></i>
                                          </a>
                                          <ul nz-menu>
                                              <li nz-menu-item (click)="create(data.id)"
                                              *ngIf="isGranted('Pages.WaterQualityColors.Edit')"
                                              >{{l('Edit')}}</li>
                                              <li nz-menu-item (click)="delete(data)"
                                              *ngIf="isGranted('Pages.WaterQualityColors.Delete')">
                                                  {{l('Delete')}}
                                          </li>
                                          </ul>
                                      </nz-dropdown>
  
                          </td>
                      
                      <td nz-td>
                        {{data.name}}
                      
                      </td>
                      <td nz-td>{{data.displayValue}}</td>
                      
                      <td nz-td>
                        {{data.customColor}}
                        <nz-tag [nzColor]="data.customColor"></nz-tag>
                      </td>
                      
                  </tr>
              </tbody>
          </nz-table>
      </nz-card>
  </div>

</div>

